<template>
  <div class="icon-render-page">
    <div class="icon-render-search flex-row">
      <ElInput
        v-model="filter"
        :clearable="filter !== ''"
        :placeholder="`即时搜索……请输入图标名称 (${internalIcons.length})`"
        class="icon-render-input flex-item"
        prefix-icon="el-icon-search" />
      <ElRadioGroup v-model="mode" class="icon-render-mode" style="float: right">
        <ElRadioButton label="风格一" name="mode" />
        <ElRadioButton label="风格二" name="mode" />
        <ElRadioButton label="风格三" name="mode" />
      </ElRadioGroup>
    </div>

    <ElRow :gutter="12" class="grid">
      <ElCol
        v-for="(item, index) in internalIcons"
        :key="item"
        :lg="{ span: 4 }"
        :md="{ span: 4 }"
        :sm="{ span: 6 }"
        :xg="{ span: 2 }"
        :xs="{ span: 8 }"
        class="icon-render-card-wrapper"
        @click.native="copy(item)">
        <ElCard
          :style="{ color: getColor(index), backgroundColor: getBackgroundColor(index) }"
          :title="item"
          shadow="hover">
          <i :class="item" class="icon-render-icon-size"></i>
          <p ref="label" :style="{ color: mode === '风格一' ? 'white' : 'black' }" class="icon-render-card-label">
            {{ item }}
          </p>
        </ElCard>
      </ElCol>
    </ElRow>
  </div>
</template>

<script>
  import { getColor3 } from '@web-utils/core'
  import { copyData } from '@/util/clipboard'
  import { debounce } from 'lodash-es'

  export default {
    name: 'IconRender',
    props: {
      icons: Array
    },
    data() {
      return {
        filter: '',
        mode: '风格二',
        internalIcons: []
      }
    },
    watch: {
      filter() {
        this.debouncedFilter()
      }
    },
    created() {
      this.debouncedFilter = debounce(this.filterIcons, 500)
    },
    mounted() {
      setTimeout(async () => {
        this.internalIcons = Object.freeze(this.icons)
      })
    },
    methods: {
      copy: item => copyData(item),
      getBackgroundColor(index) {
        if (this.mode === '风格一') {
          return getColor3(index)
        }
        return 'white'
      },
      getColor(index) {
        if (this.mode === '风格一') {
          return 'white'
        }
        if (this.mode === '风格二') {
          return getColor3(index)
        }
        return ''
      },
      filterIcons() {
        this.internalIcons = Object.freeze(this.icons.filter(value => value.lastIndexOf(this.filter) > -1))
      }
    }
  }
</script>

<style lang="scss">
  .icon-render-page {
    width: 100%;
    min-width: 1080px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px;

    .grid .el-card__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100px;
      padding: 10px;
    }

    .icon-render-icon-size {
      margin-bottom: 10px;
      font-size: 2.5em;
    }

    .icon-render-card-label {
      width: 100%;
      font-size: 0.8em;
      text-align: center;

      @include ellipsis-line;
    }

    .icon-render-input {
      font-size: 14px;
    }

    .icon-render-search {
      .icon-render-mode {
        flex-shrink: 0;
        margin-left: 20px;
      }
    }

    .icon-render-card-wrapper {
      margin-top: 10px;
      cursor: pointer;
    }
  }
</style>
